$(function () {
	const layer = layui.layer;
	const form = layui.form;
	// 定义请求文章分类的列表方法
	function initCate() {
		$.ajax({
			method: 'GET',
			url: '/my/article/cates',
			success(res) {
				if (res.status !== 0) {
					return layer.msg('初始化文章分类失败！');
				}
				// console.log(res);
				// 调用模板引擎渲染分类DOM结构
				const htmlStr = template('tpl-cate', res);
				// console.log(htmlStr);
				$('[name=cate_id').html(htmlStr);
				// layui的扁担重新渲染方法render
				form.render();
			}
		});
	}
	initCate();
	// 初始化富文本编辑器
	initEditor();
	const $image = $('#image');
	// 配置选项
	const options = {
		// 长宽比
		aspectRatio: 400 / 280,
		// 指定预览区域
		preview: '.img-preview',
		// 视图模式
		viewMode: 2
	};

	// 创建裁剪区域
	$image.cropper(options);
	$('#btnChooseImage').on('click', function () {
		$('#coverFile').click();
	});
	// 文件选择框绑定change事件
	$('#coverFile').on('change', function (e) {
		console.log(e);
		// target属性  files为伪数组的属性
		const fileList = e.target.files;
		if (fileList.length === 0) {
			return layer.msg('请选择照片！');
		}
		// 获取到文件 改变路径
		// const file = e.target.files[0];
		// 数组结构写法 为fileList列表的第0项
		// const [fileList] = fileList;
		// 将文件转化为路径
		const imgURL = URL.createObjectURL(fileList[0]);
		// 销毁旧图  渲染裁剪新的图片
		$image
			.cropper('destroy') //销毁旧的裁剪区域
			.attr('src', imgURL) // 重新设置图片路径
			.cropper(options); // 重新初始化裁剪区域
	});
	// 已发布 、 草稿
	let art_state = '已发布';
	$('#btnSave2').on('click', function () {
		art_state = '草稿';
	});
	// 绑定submit事件
	$('#form-pub').on('submit', function (e) {
		e.preventDefault();
		// new一个表单对象
		const fd = new FormData(this);
		fd.append('state', art_state);

		// 裁剪封面输出为文件对象
		$image
			.cropper('getCroppedCanvas', {
				width: 400,
				height: 280
			})
			.toBlob(function (blob) {
				// 将 Canvas 画布上的内容，转化为文件对象
				// 得到文件对象后，进行后续的操作
				// 5. 将文件对象，存储到 fd 中
				fd.append('cover_img', blob);
				// 6. 发起 ajax 数据请求
				TODO: publishArticle(fd);
			});
	});
	// 发起服务端请求
	function publishArticle(fd) {
		$.ajax({
			method: 'POST',
			url: '/my/article/add',
			data: fd,
			// 注意：如果向服务器提交的是 FormData 格式的数据，
			// 必须添加以下两个配置项
			contentType: false,
			processData: false,
			success(res) {
				// console.log(res);
				if (res.status !== 0) {
					return layer.msg('发布文章失败！');
				}
				layer.msg(res.message);
				location.href = '/article/art_list.html';
			}
		});
	}
});
